<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
	</head>
	<style>
		/*
		
		*/
	   *{
		   font: 16px "微软雅黑";
		   /*去点内外边距*/
		   margin: 0;
		   padding: 0;
		   /*无序列表：有样式---‘去样式：列表项’*/
		   list-style-type: none;
		   /*无序列表：有样式---【理解：简写】
		   去全部样式：list-style-type 去列表项样式
		             list-style-position 去列表项标记位置样式
					 list-style-image    去列表项标记位置样式
		   */
		   list-style: none;
	   }
	   /* 左栏效果
	     1.左栏空间区域 235*460  背景颜色
		 2.左栏区域内容【li】  加权235*50 相对定位--挂靠点【固定位置】
		 3.给每个区域内容【li】 加鼠标移动上去改背景颜色
		 4.左栏弹出框：400*500 1像素边框 绝对定位
	   */
	   aside{
		   width: 235px;
           height: 450px;
	       background: #ff0000;
		   
	   }
	  aside ul.sidebar li {
	             width: 235px;
	             height: 50px; 
	             /*
				 相对定位--挂靠点
				 */
				position: relative;
				text-align: left;
				line-height: 50px;
	           }
	   
	    aside ul.sidebar li:hover {
	             background: #e0e0e0;
	           }
		aside ul.sidebar div.out{
			width: 400px;
			height: 560px;
			border: 1px solid red;
			position: absolute;
			left: 285px;
			/*显示与隐藏  Javascript【JQury框架】*/
			display:block;
			
		}	  
		 aside ul.sidebar li span{
			 border: #ff0000;
		 }

	</style>
	<body>
		<!-- html结构  结构化标记【语义化标记 】
		aside元素 针对：左栏 广告 弹出效果...... 有利于SEO优化
		 -->
		 <aside>
			 <ul class="sidebar">
				 <div class="out"></div>
				 <li>手机</li>
				 <li>电脑</li>
				 <li>家具</li>
				 <li>男装</li>
				 <li>女装</li>
				 <li>美妆</li>
				 <li>房产</li>
				 <li>母婴</li>
				 <li>食品</li>
			 </ul>
		 </aside>
	</body>
</html>